<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>淘淘商城</title>
    <link rel="icon" href="../../style/images/logo.png">
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../style/common.css"/>
    <link rel="stylesheet" href="../../element-ui/index.css"/>
    <style>
        body {
            padding: 0 !important;
            margin: 0 !important;
            overflow-y: hidden;
        }

        .el-footer {
            /*background-color: #B3C0D1;*/
            color: #333;
            text-align: center;
        }

        .el-header {
            padding: 0 !important;
            background-color: white;
            color: #333;
            text-align: center;
            height: 100px !important;
        }


        .el-main {
            height: 90vh;
            background-color: rgb(245, 245, 245);
            color: #333;
            text-align: center;
        }

        .el-menu-item, .el-submenu__title {
            color: rgb(108, 108, 108) !important;
            font-weight: initial !important;
            font-size: 12px !important;
        }

        .el-menu-item:focus, .el-menu-item:hover {
            outline: 0;
            background-color: rgb(245, 245, 245) !important;
        }

        .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
            outline: 0;
            color: rgb(255, 118, 0) !important;
        }


        .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
            font-size: 14px !important;
            font-weight: normal;
            color: #1c1c1c !important;
            /*font-family: "Hiragino Sans GB";*/
        }

        .el-breadcrumb__separator {
            margin: 0 3px;
            font-weight: initial;
            color: #1c1c1c;
        }

        .infinite-list {
            padding: 0px;

        }

        .el-input__inner {
            /*border: 2px solid #FF4400FF;*/
            /*color: #fa0606 !important;*/
            border-radius: 0;
        }

        .el-input.is-active .el-input__inner, .el-input__inner:focus {
            /*border: 2px solid #FF4400FF;*/
        }

        .el-input.is-active .el-input__inner, .el-input__inner:hover {
            border: 1px solid #c0c4cc;
        }

        .el-input.is-active .el-input__inner, .el-input__inner:focus {
            border-color: #c0c4cc;
            outline: 0;
        }

        .el-input-number__decrease:hover, .el-input-number__increase:hover {
            color: #c0c4cc;
        }

        .el-input-group__append, .el-input-group__prepend {
            background-color: #FF4400FF;
            color: white;
            font-weight: bold !important;
            vertical-align: middle;
            display: table-cell;
            position: relative;
            border: 1px solid #FF4400FF;
            border-radius: 0;

            padding: 0 20px;
            width: 1px;
            white-space: nowrap;
        }

        .el-button:focus, .el-button:hover {
            color: rgb(255, 118, 0);
            border-color: rgb(255, 118, 0);
            background-color: rgb(255, 118, 0);
        }

        .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
            border-color: rgb(255, 118, 0);
        }

        .el-button--warning {
            color: #FFF;
            background-color: rgb(255, 148, 2);
            border: none;
        }

        .el-button--danger {
            color: #FFF;
            background-color: rgb(255, 105, 0);
            border-color: rgb(255, 105, 0);
        }

        el-button--warning.is-active, .el-button--warning:active {
            background: rgb(255, 105, 0);
            border-color: rgb(255, 105, 0);
            color: #fff;
        }

        el-button:focus, .el-button:hover {
            color: rgb(255, 118, 0);
            border-color: rgb(255, 148, 2);
            background-color: rgb(255, 148, 2);
        }
        #parameter:hover{
            background-color: white;
        }
        #number{
            border: none!important;
            background-color: rgb(245,247,250)
        }
        #number:hover,#number:focus{
            border: none!important;
            background-color: rgb(245,247,250)
        }
        #collect{
            border: none;
        }
        #collect:hover{
            background-color: #e9ebef;
            color: rgb(96,98,102);
            border: none;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="">
            <div>
                <div style="background-color: rgb(245,245,245) ;
            width: 100%;display: flex;justify-content: space-around">
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal"
                                 >


                            <el-menu-item v-show="showUser" style="color: rgb(255,68,0) !important;" index="1"><a
                                    href="login.html">亲，请登录</a></el-menu-item>

                            <el-submenu v-show="!showUser" index="1">
                                <template style="" slot="title">
                                    <a style="color: rgb(255,68,0) !important;"
                                       href="user.html">欢迎您，{{user.username}}</a></template>
                                <el-menu-item style="height: 80px" index="2-1">
                                    <div style="">
                                        <a href="user.html">
                                            <el-image
                                                    style="width: 70px; height: 70px; border: none;border-radius: 50%;cursor: pointer;"
                                                    :src="getImage(user.avatar)"
                                                    :preview-src-list="[ `/common/download?name=${user.avatar}` ]">
                                                <div slot="error" class="image-slot">
                                                    <img src="../../style/images/淘公仔2.png"
                                                         style="width: auto; height: 70px; border:none;">
                                                </div>
                                            </el-image>
                                        </a>
                                        <a href="user.html"> &nbsp;&nbsp;账号管理</a> &nbsp;&nbsp;|&nbsp;&nbsp;
                                        <a @click="logout()">退出</a>
                                    </div>
                                </el-menu-item>
                            </el-submenu>

                            <el-menu-item index="2"><a href="register.html">免费注册</a></el-menu-item>
                        </el-menu>
                    </div>
                    <div style="height: 40px;">
                        <el-menu background-color="rgb(245,245,245)"
                                 style="float: right;" class="el-menu-demo" mode="horizontal"
                                  >

                            <el-menu-item index="1"><a href="index.html" target="_blank">返回首页</a></el-menu-item>
                            <el-menu-item index="2"><a href="user.html" target="_blank">我的淘淘</a></el-menu-item>
                            <el-menu-item index="3"><a href="#" target="_blank">我的足迹</a></el-menu-item>
                            <el-menu-item index="4" class="el-icon-shopping-cart-2"
                                          style="color: rgb(255,68,0) !important;font-size: 16px !important;">
                                <a href="shoppingCart.html" target="_blank"
                                   style="color: rgb(108,108,108) !important;font-size: 12px !important;">&nbsp;&nbsp;购物车</a>
                            </el-menu-item>
                            <el-menu-item class="el-icon-star-on" style="font-size: 16px !important;" index="5">
                                <a style="font-size: 12px !important;" href="#" target="_blank">&nbsp;收藏的宝贝
                                </a></el-menu-item>
                        </el-menu>
                    </div>
                </div>
                <div style="display: flex;justify-content: center;width:100%;">
                    <div style=" display: flex;align-items: center;justify-content: space-between;
                    width: 1150px;height: 60px ">
                        <div style="display: flex;align-items: center;">
                            <a href="../../pages/front/index.html"><img style="width: 40px;height: 40px;"
                                                                        src="../../style/images/logo.png"></a>
                            <a href="../../pages/front/index.html"><img style="width: 40px;height: 40px;"
                                                                        src="../../style/images/tao.png"></a>
                            <a href="../../pages/front/index.html"><img
                                    style="width: 40px;height: 40px;margin-left: -5px"
                                    src="../../style/images/tao.png"></a>
                        </div>
                    </div>
                </div>
            </div>
        </el-header>
        <el-main class="main"
                 style="background-color: rgb(233,223,217);display: flex;justify-content: center;overflow-y: inherit">
            <div>
                <el-backtop target=".main" style="color: rgb(255,68,0)"></el-backtop>
                <div style="background-color: white;width: 1150px;border-radius: 24px;padding: 15px 15px">
                    <div style="height: auto;display: flex">
                        <div style="width: 453px;height: auto; ">
                            <div style="width: 450px;height: 450px;padding: 20px ;
                            border-radius: 12px;background-color: rgb(250,250,250);display: flex;justify-content: center">
                                <div style=""  >
                                    <div  style="background-color: white;width: 440px;
                                    height: 440px;
                                        ">
                                        <el-image
                                                style="width: 440px; height: 440px; border: none;cursor: pointer;border-radius: 12px"
                                                :src="getImage(Goods.image)"
                                                fit="contain"
                                                :preview-src-list="[ `/common/download?name=${Goods.image}` ]">
                                            <div slot="error" class="image-slot">
                                                <img src="../../style/404.jpg"
                                                     style="width: 420px; height: 420px; border:none;border-radius: 12px !important;">
                                            </div>
                                        </el-image>
                                    </div>
                                </div>
                            </div>
                            <div>
                            </div>
                        </div>
                        <div style="width: 664px; height: 500px;
                        padding: 10px 10px 10px 30px;text-align: left;line-height: 20px">
                            <el-form ref="Goods" :model="Goods" style="color: black">
                                <div>
                                    <el-form-item>
                                        <span style="font-size: 20px;font-weight: bold">{{Goods.name}}</span>
                                    </el-form-item>
                                </div>

                                <div style="color: #b9b9b9">
                                    月销2万+
                                </div>
                                <div style="color: rgb(255,77,0);">
                                    <el-form-item>
                                        <span style="font-size: 12px">促销活动</span>
                                        <span style="font-size: 16px">￥</span>
                                        <span style="color: rgb(255,77,0);font-size: 28px;">
                                            {{ (Goods.price/100)%1===0 ? Goods.price/100 +'.00' :  Goods.price/100}}
                                        </span>
                                        <span style="color: #c0c4cc;text-decoration: line-through;font-size: 13px;font-weight: initial">
                                            {{(Goods.price/100)%1===0 ? Goods.price/100+100 +'.00' :  Goods.price/100+100}}</span>
                                    </el-form-item>
                                </div>
                                <el-popover style=""
                                        transition="fade-in-linear"
                                        placement="bottom-start"
                                        width="630"
                                        trigger="hover"
                                >
                                    <el-card    style="border: none;" shadow="never" class="box-card">
                                        <div style="float: left"  v-for="flags in Goods.flags" :key="flags.id">
                                            <div style="white-space: nowrap;text-overflow: ellipsis;
                                            overflow: hidden; width: 165px;margin: 10px">
                                                {{flags.name}}&nbsp;:
                                                <span v-for="item in JSON.parse(flags.value)" :key="item">&nbsp;
                                                    {{item}}
                                                </span>
                                            </div>
                                        </div>
                                    </el-card>

                                    <el-button id="parameter" slot="reference" round="">宝贝参数</el-button>
                                </el-popover>
                                    <div style="margin: 20px 0;"><span style="font-size: 14px;color: #706e6e;">派送</span>：&nbsp;&nbsp;&nbsp;上海&nbsp;&nbsp;至&nbsp;&nbsp;
                                        <span style="cursor: pointer">
                                                <el-cascader
                                                        separator="-"
                                                        placeholder="选择地址"
                                                        v-model="value"
                                                        :props="{ checkStrictly: true }"
                                                        :options="province"
                                                        @change="handleChange">
                                                </el-cascader>
                                    </span></div>
                                    <p style="margin: 25px 0;"><span style="margin-right: 30px;font-size: 14px;color: #706e6e;">
                                        快递:</span>免运费18:00前付款，预计{{deliveryDate.month}}月{{deliveryDate.day}}日送达</p>
                                <el-form-item>
                                    <span style="margin-right: 30px;font-size: 14px;color: #706e6e;">数量:</span>
                                    <el-input-number id="number" v-model="form.number" @change="numberChange" :min="1" :max="10"></el-input-number>
                                </el-form-item>
                                <el-form-item style="color:white;font-weight: bold;">
                                    <el-button  style="height: 45px;background-color: rgb(255,77,0);width: 150px;
                                    border-top-right-radius: 0;
                                    border-top-left-radius: 34px;
                                    border-bottom-right-radius: 0;
                                    border-bottom-left-radius: 34px;
                                    color:white; font-weight: bold" type="warning" @click="purchase">马上抢
                                    </el-button>
                                    <el-button @click="addToShoppingCart"  style="height: 45px;margin-top: -100px;margin-left: -4px;color:white;font-weight: bold;
                                    width: 150px;
                                    border-top-right-radius: 34px;
                                    border-top-left-radius: 0;
                                    border-bottom-right-radius: 34px;
                                    border-bottom-left-radius: 0px;" type="warning">加入购物车
                                    </el-button>
                                    <el-button class="el-icon-star-on" id="collect" size="mini" round="">收藏</el-button>
                                </el-form-item>

                            </el-form>
                        </div>
                    </div>


                </div>
            </div>
        </el-main>
        <!--        <el-footer>Footer</el-footer>-->
    </el-container>
</div>
<script src="../../js/vue.js"></script>
<script src="../../element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../js/axios.min.js"></script>
<script src="../../js/common.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                showParameter: this.goodsList != null,
                showGoods: this.Goods != null,
                Goods: {},
                temp:[],
                form: {
                    address: [],
                    number: 1,
                },
                deliveryDate: {
                    month: 0,
                    day: 0
                },
                value: [],
                province: [],
                total: 0,
                user: {},
                showUser: true,
                shoppingcart: [],
                goodsList:[],
                restaurants: [],
                state: '',
                timeout: null
            }
        },
        computed: {

        },
        created() {
            this.deliveryDate.day = new Date().getDay() + 4 < 10 ? '0' + (new Date().getDay() + 4) : new Date().getDay() + 4
            this.deliveryDate.month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
            this.getProvince()
            this.getGoods()
            const user = window.localStorage.getItem('user')
            if (user) {
                this.showUser = false
                this.user = JSON.parse(user)
            }
            console.log("user信息：" + this.user)
        },
        methods: {
            delete(){
                axios.delete('/shoppingCart?ids='+this.temp.id)
            },
           async purchase(){
               if(this.user != null){
                   let params = {
                       name: this.Goods.name,
                       image: this.Goods.image,
                       goodsId: this.Goods.id,
                       // goodsFlag: this.Goods.flags.value,
                       number: this.form.number,
                       amount: (this.form.number* this.Goods.price)/100,
                   }
                   const {data: res} = await axios.post('/shoppingCart/add',params)
                   // console.log(res.data)
                   if (res.code ===0 && res.msg === 'NOTLOGIN') {
                       window.top.location.href = '/pages/front/login.html'
                   } else if(res.code === 1){
                       this.temp = res.data
                       // this.delete()
                       window.location.href = '/pages/front/order.html?id='+this.temp.id
                   }else {
                       this.$notify({
                           title: '错误',
                           message: '添加失败',
                           type: 'warning',
                           duration: 3000
                       });
                   }
               }
            },

            async addToShoppingCart(){
                if(this.user != null){
                    let params = {
                        name: this.Goods.name,
                        image: this.Goods.image,
                        goodsId: this.Goods.id,
                        // goodsFlag: this.Goods.flags.value,
                        number: this.form.number,
                        amount: (this.form.number* this.Goods.price)/100,
                    }
                    const {data: res} = await axios.post('/shoppingCart/add',params)
                    // console.log(res.data)
                    if (res.code ===0 && res.msg === 'NOTLOGIN') {
                        window.top.location.href = '/pages/front/login.html'
                    } else if(res.code === 1){
                        this.$notify({
                            title: '宝贝添加成功',
                            message: '宝贝添加成功',
                            type: 'success',
                            duration: 2000
                        });
                    }else {
                        this.$notify({
                            title: '错误',
                            message: '添加失败',
                            type: 'warning',
                            duration: 3000
                        });
                    }
                }

            },

            async getProvince() {
                const {data: res} = await axios.get(`/district/list/${86}`)
                this.province = res.data
            },

            handleChange(value) {
                console.log('省市县code:'+this.value)

            },
            numberChange(value) {
                console.log('number:'+this.form.number)

            },
           async getGoods() {
               let href = window.location.href;
               let getGoodsByUrl = parseUrl(decodeURIComponent(href));
               const {data: res} = await axios.get(`/goods/detail/${getGoodsByUrl.id}`)
               console.log('商品信息：'+res.data.flags)
               if(res.code=== 1){
                   this.Goods = res.data
               }else {

               }
            },
            async logout() {
                const {data: res} = await axios.post('/user/logout')
                if (res.code == 1) {
                    localStorage.removeItem("user")
                    window.location.href = '/pages/front/index.html'
                }
            },
            async loadGoodsList() {
                let getIdByUrl = parseUrl(decodeURIComponent(window.location.href));
                const {data: res} = await axios.get(`/goods/listById/&${getIdByUrl.name}`)
                this.state = getIdByUrl.name
                // console.log(res.data)
                this.goodsList = [...this.goodsList, ...res.data]
                this.goodsList = this.shuffle(this.goodsList);

            },
            getImage(image) {
                return `/common/download?name=${image}`
            },
        },
        mounted() {
        }
    })
</script>
</body>
</html>